<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- App favicon -->
    <link rel="shortcut icon" href="/assets/images/favicon.ico">

    <link href="/assets/plugins/jvectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet">

    <!-- App css -->
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/icons.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/metismenu.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/style.css" rel="stylesheet" type="text/css" />
    <!-- 引入vue cdn -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入axios cdn -->
    <script src="/app/vue/axios/axios.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>

<body class="container_12">
    <div class="box round first" style="margin:15px;">
        <h2>在线发布</h2>
        <div class="block">
            <form style="width:50%" id="add_news" enctype="multipart/form-data" @submit.prevent="addNews"
                @keyup.enter="addNews">
                <table class="form">
                    <tbody>
                        <tr>
                            <td class="col1">
                                <label>
                                    文章标题</label>
                            </td>
                            <td class="col3">
                                <input name="title" required v-model="news.title" type="text" class="medium"
                                    id="grumble">
                            </td>
                        </tr>
                        <tr>
                            <td class="col1">
                                <label>
                                    文章分类</label>
                            </td>
                            <td class="col2">
                                <select name="cateid" v-model="news.cateid">
                                    <option v-for="item in cates" :value="item.id" v-text="item.title"></option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="col1">
                                <label>
                                    文章封面</label>
                            </td>
                            <td class="col2">

                                <input name="thumb" required v-model="news.thumb" type="text" id="thumb">
                                <a href="javascript:;" class="uploadImg ">点击上传</a>
                            </td>
                        </tr>
                        <tr>

                            <td>

                                <label>

                                    文章简述</label>
                            </td>
                            <td>
                                <textarea name="description" required style="width:550px;height:80px;"
                                    v-model="news.description">
                             </textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>

                                    文章正文内容</label>
                            </td>
                            <td>
                                <textarea name="contents" required style="width:550px;height:80px;"
                                    v-model="news.contents"></textarea>

                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td colspan="">
                                <button type="submit" class="btn btn-blue">提交数据</button>
                            </td>
                        </tr>

                    </tbody>
                </table>
            </form>
        </div>
    </div>
    <!-- jQuery  -->
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/js/metisMenu.min.js"></script>
    <script src="/assets/js/waves.min.js"></script>
    <script src="/assets/js/jquery.slimscroll.min.js"></script>

    <script src="/assets/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js"></script>
    <script src="/assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>

    <script src="/assets/plugins/moment/moment.js"></script>
    <script src="/assets/plugins/apexcharts/apexcharts.min.js"></script>
    <script src="/assets/pages/jquery.dashboard.init.js"></script>
    <!-- App js -->
    <script src="/assets/js/app.js"></script>
    <script src="/source/scripts/window.js"></script>
    <script src="/source/js2.js"></script>
    <script src="/kindeditor-4.1.10/kindeditor-min.js"></script>
    <script>
        KindEditor.ready(function (K) {
            editor = K.create('textarea[name="contents"]', {
                uploadJson: '/kindeditor-4.1.10/php/upload_json.php',
                fileManagerJson: '/kindeditor-4.1.10/php/file_manager_json.php',
                allowFileManager: true,
                items: ['source',
                    'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
                    'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
                    'insertunorderedlist', '|', 'emoticons', 'link', 'fullscreen'],
                afterBlur: function () {
                    this.sync();
                }
            });
        });
    </script>
    <script>
        $().ready(function () {
            $(".uploadImg").click(function () {
                openWindow("/upload.jsp");
            });
            $("#thumb").on("input", function () {
                $(".oldImg").attr("src", "/" + $("#thumb").val());
            });
        });
    </script>
    <script type="text/javascript">
        const baseUrl = "http://localhost:8080";
        let vm = new Vue({
            el: "#add_news",
            data() {
                return {
                    news: {},
                    cates: []
                }
            },
            methods: {
                addNews() {
                    axios({
                        method: "post",
                        url: baseUrl + "/hotel/news/news/save",
                        data: this.news,
                        responseType: "json",
                    }).then(response => {
                        // console.log(response);
                        swal({
                            title: response.data.data.message,
                            text: "点击确定继续",
                            icon: response.data.data.state,
                            button: "确定",
                        }).then(value => {
                            window.location.href = baseUrl + "/" + response.data.data.url;
                        });
                    }).catch(error => {
                        console.log("请求失败，失败信息：", error);
                    })
                },
                getCateData() {
                    /*
                    API：http://localhost:8080/hotel/news/news/get_cate_data
                    */
                    axios({
                        method: "get",
                        url: baseUrl + "/hotel/news/news/get_cate_data",
                        responseType: "json"
                    }).then(response => {
                        this.cates = response.data.list;
                    }).catch(error => {
                        console.log("请求失败，失败信息：", error);
                    })
                }
            },
            created() {
                this.getCateData();
            },
        })
    </script>
</body>

</html>